<template>
	<view class="goal-detail">

		<!-- 头部 -->
		<!-- :style="{backgroundImage: sysGoal ? `url(${sysGoal.goalPic})` : ''}" -->
		<view class="goal-pic">
			<u-image :src="sysGoal.goalPic" width="100%" mode="widthFix"></u-image>
			<view class="sys-goal-times-list">
				<view class="goal-name">已选择{{sysGoal.goalName}}小目标</view>
				<view class="cell" @click="showSysGoalTimesList=true">
					<view class="cell-title">目标任务</view>
					<view class="cell-value">
						<picker :value="sysGoalTimesValue" mode=selector :range="sysGoal.sysGoalTimesList" :range-key="'timesDescription'"
						 @change="handleConfirmSysGoalTimes">
							<text class="uni-input">{{sysGoal.sysGoalTimesList[sysGoalTimesValue].timesDescription}}</text>
							<u-icon class="cell-icon" name="arrow-right"></u-icon>
						</picker>
						<!-- {{ sysGoalTimes.timesDescription || sysGoal.sysGoalTimesList[0].timesDescription }} -->

					</view>
				</view>

				<!-- 坚持健身，坚持练书法，坚持绘画，学习烹饪 这四个目标不显示任务 -->
				<view v-if="showTask" class="cell" @click="showSysGoalTimeList=true">
					<view class="cell-title">目标任务</view>
					<view class="cell-value">
						<picker :value="sysGoalTimeValue" mode=selector :range="sysGoal.sysGoalTimeList" :range-key="'timeDescription'"
						 @change="handleConfirmSysGoalTime">
							<text class="uni-input">{{sysGoal.sysGoalTimeList[sysGoalTimeValue].timeDescription}}</text>
							<u-icon class="cell-icon" name="arrow-right"></u-icon>
						</picker>
					</view>
				</view>
			</view>
		</view>

		<!-- 预捐赠金额 -->
		<view class="amount-wrapper">
			<view class="title">预捐赠金额</view>
			<view class="amount-list">
				<!-- previous-margin="150px" next-margin="150px" -->
				<swiper previous-margin="130px" next-margin="80px" @change="handleAmountChange" :current="selectAmount">
					<swiper-item v-for="(amount, index) in amountList" :key="amount">
						<view class="amount-item">
							<view class="amount" :class="{active: index === selectAmount}">￥{{ amount }}</view>
							<view class="amount-icon">
								<view class="point"></view>
								<view class="line"></view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view>
				<swiper previous-margin="12px" next-margin="0px" @change="handleAmountChange" :current="selectAmount">
					<swiper-item v-for="(amount, index) in amountList" :key="amount">
						<view class="amount-item-desc">
							<view class="desc-icon"></view>
							<view class="desc">
								在契约期间，您若未完成其所设定的目标任务，您需自行捐赠 {{ amount }} 元给您所选择公益慈善项目
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="amount-description">
				注：\n所交付契约押金由本平台作为保管，保管期限为用户所设定该目标对象的契约期限。\n用户在契约期限内，完成其所设定的契约任务后，契约期限结束后，契约押金将如数返回。\n用户在契约期限内，未能按照其所设定契约任务的要求完成任务，按未完成任务的次数（日数）来扣取一定百分比的契约押金，所扣取押金将如数捐赠于公益慈善。\n通过非正常手段达标打卡的行为可视为作弊，我们有权将其此次成功打卡，改为未成功打卡。
			</view>
		</view>

		<!-- 预捐赠项目 -->
		<view class="project-wrapper">
			<view class="title">预捐赠项目</view>
			<view class="project-list">
				<swiper previous-margin="24px" next-margin="24px" class="project-swiper" @change="handleChangeProject" :current="currenProject">
					<swiper-item v-for="(charity, index) in sysGoal.sysCharityList" :key="index" @click="showPopup=true">
						<view class="project-item">
							<view class="project-name">{{ charity.charityName }}</view>
							<view class="project-information">
								<u-image class="project-image" width="218" height="152" :src="charity.charityPic"></u-image>
								<view class="project-description">{{ charity.description }}</view>
							</view>
							<view class="source-description">
								公益项目中的项目图片、项目名称、项目介绍皆来源“腾讯公益”的爱心捐赠平台。如需了解更多，请自行至“腾讯公益”公益爱心捐赠平台。
							</view>
						</view>

					</swiper-item>
				</swiper>
			</view>

			<view class="project-disclaimer">
				用户在契约期限内，完成其所设定的契约任务后，待本平台工作人员核实后，方为用户与本平台的目标契约结束。\n倘如用户在契约期限内，未能按照其所设定契约任务的要求完成任务，则该用户需向其所设立的“预捐赠公益项目”捐赠“预捐赠金”。\n用户捐赠完毕后，需将“款项捐赠支付成功的详情凭证”截屏并上传至小程序平台，“个人捐赠”页面点击对应的捐赠项目进行上传捐赠截图。待本平台工作人员核实后，方为用户与本平台的目标契约结束。
			</view>
		</view>

		<view class="submit-wrapper">
			<view class="protocol">
				<navigator url="./protocol">
					《吃鲸目标契约协议》
				</navigator>
			</view>
			<view>
				<u-button class="btn" size="medium" type="success" :loading="isSubmit" @click="handleConfirm">设定目标</u-button>
			</view>
		</view>

		<u-popup v-model="showPopup" mode="bottom">
			<view class="popup-wrapper">
				<view class="title">特别说明</view>
				<view class="description-text">
					<view class="text">
						吃鲸目标小程序平台提供平台服务，用户所选择的捐赠金额、公益项目均为用户自愿选择，均由用户去执行落实捐赠给“腾讯公益”的爱心捐赠平台。
					</view>
					<view class="text">
						用户捐赠完毕后，需将“款项捐赠支付成功的详情凭证”截屏并上传至小程序平台，“个人捐赠”页面点击对应的捐赠项目进行上传捐赠截图。
					</view>
					<view class="text">
						待本平台工作人员核实后，方为用户与本平台的目标契约结束。感谢您的信任和支持。
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 成功提示 -->
		<u-modal v-model="showSuccess">
			<view class="slot-content">
				{{ message }}
			</view>
		</u-modal>

		<!-- 登录弹窗 -->
		<u-popup v-model="showLoginDialog" mode="center" width="500rpx">
			<view class="popup-wrapper">
				<view class="tip">
					<view>您凭证已过期或未登录</view>
					<view>请登录</view>
				</view>
				<u-button type="primary" :loading="isLogin" open-type="getUserInfo" @getuserinfo="handleLogin">登录</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		getWebGoalDetail,
		chooseGoal
	} from '@/api/goal.js'
	import loginMixin from '@/utils/loginMixin.js'

	export default {

		mixins: [loginMixin],

		data() {
			return {
				showLoginDialog: false, // 等弹窗
				showPopup: false, // 弹窗
				sysGoalTimesValue: 0, // 选择的每月目标的索引
				sysGoalTimeValue: 0, // 选择的每次目标的索引
				showSysGoalTimesList: false, // 每月目标
				showSysGoalTimeList: false, // 每次目标
				sysGoalId: '514',
				sysGoal: {}, // 系统目标详情
				amountList: [40, 60, 80, 100],
				selectAmount: 0, // 选择金额的索引值
				currenProject: 0, // 选择公益项目的索引值
				isSubmit: false, // 提交中 按钮显示loading状态
				showSuccess: false, // 成功提示
				message: '', // 提交后的提示信息
				notTargetTask: '坚持健身，坚持练书法，坚持绘画，学习烹饪',
				showTask: false
			}
		},

		onLoad(options) {
			this.sysGoalId = options.sysGoalId
			// this.user = this.$store.getters.getUserInfo
			this.handleGetWebGoalDetail()
		},

		watch: {
			'sysGoal.goalName'(value) {
				if (this.notTargetTask.includes(value)) {
					this.showTask = false
				} else {
					this.showTask = true
				}
			}
		},


		methods: {

			// 获取目标相关信息
			async handleGetWebGoalDetail() {
				const data = JSON.stringify({
					sysGoalId: this.sysGoalId
				})
				try {
					uni.showLoading({
					    title: '加载中'
					});
					const {
						resultData
					} = await getWebGoalDetail({
						data
					})
					this.sysGoal = resultData.sysGoal
					uni.hideLoading()
				} catch(e) {
					uni.hideLoading()
				}
			},


			// 选择每月
			handleConfirmSysGoalTimes(e) {
				this.sysGoalTimesValue = e.detail.value
			},

			// 选择每次
			handleConfirmSysGoalTime(e) {
				this.sysGoalTimeValue = e.detail.value
			},

			// 预捐金额改变
			handleAmountChange(e) {
				this.selectAmount = e.detail.current
			},

			// 公益项目改变
			handleChangeProject(e) {
				this.currenProject = e.detail.current
			},
			
			// 确认弹窗
			handleConfirm() {
				uni.showModal({
					title: `确定设定${this.sysGoal.goalName}目标吗`,
					showCancel: true,
					success: (res) => {
						if (!res.confirm) return
						this.handleSubmit()
					}
				})
			},

			// 确定提交目标
			async handleSubmit() {
				if (!this.user || !this.user.openId) {
					this.showLoginDialog = true
					return
				}
				if (this.isSubmit) return
				this.isSubmit = true

				const sysGoalTimesId = this.sysGoal.sysGoalTimesList.length ? this.sysGoal.sysGoalTimesList[this.sysGoalTimesValue]
					.sysGoalTimesId : ''
				const sysGoalTimeId = this.sysGoal.sysGoalTimeList.length ? this.sysGoal.sysGoalTimeList[this.sysGoalTimeValue].sysGoalTimeId :
					''
				const sysCharityId = this.sysGoal.sysCharityList ? this.sysGoal.sysCharityList[this.currenProject].sysCharityId :
					''
				const donateMoney = this.amountList[this.selectAmount] * 100 // 元转分

				const data = JSON.stringify({
					openId: this.user.openId,
					sysGoalId: this.sysGoalId, // 目标ID
					sysGoalTimesId: sysGoalTimesId, // 目标次数
					sysGoalTimeId: sysGoalTimeId, // 目标个数
					sysCharityId: sysCharityId, // 公益项目ID
					donateMoney: donateMoney // 捐赠金额(单位：分)
				})
				try {
					const res = await chooseGoal({
						data
					})
					this.message = res.resultMsg
					this.showSuccess = true
					this.isSubmit = false
				} catch (e) {
					//TODO handle the exception
					this.isSubmit = false
					this.message = e.resultMsg || '出现错误'
					if (e.resultCode === 701) {
						this.showLoginDialog = true
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.goal-pic {
		position: relative;
		background-size: 100%;
		background-repeat: no-repeat;
	}

	.sys-goal-times-list {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 40rpx 24rpx;
		color: #fff;
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), #131114);
		box-sizing: border-box;


		.goal-name {
			padding-bottom: 32rpx;
			text-align: center;
			font-size: 32rpx;
		}

		.cell {
			display: flex;
			justify-content: space-between;
			border-top: 3rpx solid #ffffff;
			padding: 24rpx 0;
			font-size: 24rpx;

			.cell-value {
				min-width: 350rpx;
				text-align: right;
			}

			.cell-icon {
				margin-left: 12rpx;
			}
		}
	}

	.amount-wrapper {
		padding-top: 50rpx;
		background-image: url(https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/09af1d70-f579-11e9-a30a-41900ee53442.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.title {
			margin-bottom: 32rpx;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
		}

		.amount-list {
			height: 126rpx;
		}
	}

	.amount-item {

		.amount {
			height: 64rpx;
			margin-bottom: 12rpx;
			font-size: 32rpx;
			color: #fff;
		}

		.active {
			font-size: 56rpx;
		}

		.amount-icon {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 1rpx;

			.point {
				width: 26rpx;
				height: 26rpx;
				margin-left: 37rpx;
				border-radius: 26rpx;
				background-color: #fff;
			}

			.line {
				float: left;
				width: 120rpx;
				height: 6rpx;
				margin-left: 12rpx;
				background-color: #fff;
			}
		}
	}

	.amount-item-desc {

		.desc-icon {
			width: 0;
			height: 0;
			margin: auto;
			border-width: 40rpx;
			border-style: solid;
			border-color: transparent transparent #fff transparent;
			border-top: none;
			transform: translateX(-50%);
		}

		.desc {
			width: 96%;
			padding: 32rpx;
			position: relative;
			background-color: #fff;
			box-sizing: border-box;
			border-radius: 8rpx;
		}
	}

	.amount-description {
		padding: 0 30rpx 40rpx;
		white-space: pre-wrap;
		color: #fff;
		font-size: 24rpx;
	}

	.project-wrapper {
		padding-top: 50rpx;
		padding-bottom: 30rpx;
		background-image: url(https://vrfbylnr.cdn.bspapp.com/VRFBYLNR-free1/25c5dc50-f57a-11e9-8126-4dc7af777e1f.png);
		background-repeat: no-repeat;
		background-size: 100% 100%;

		.title {
			margin-bottom: 32rpx;
			text-align: center;
			color: #fff;
			font-size: 40rpx;
		}

		.project-swiper {
			min-height: 435rpx;
		}

		.project-item {
			position: relative;
			width: 95%;
			padding: 27rpx;
			background-color: #fff;
			border-radius: 8rpx;
			box-sizing: border-box;

			.project-name {
				margin-bottom: 52rpx;
				text-align: center;
			}

			.project-information {
				display: flex;

				.project-description {
					text-overflow: -o-ellipsis-lastline;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 4;
					line-clamp: 4;
					-webkit-box-orient: vertical;
					margin-left: 28rpx;
					font-size: 29rpx;
				}
			}

			.source-description {
				margin-top: 40rpx;
				font-size: 24rpx;
				color: rgb(153, 153, 153);
			}
		}

		.project-disclaimer {
			margin-top: 28rpx;
			padding: 0 30rpx;
			font-size: 18rpx;
			color: #fff;
		}
	}

	.popup-wrapper {
		padding: 40rpx;

		.title {
			margin-bottom: 28rpx;
			text-align: center;
		}


		.text {
			margin-bottom: 12rpx;
			font-size: 24rpx;
		}
	}

	.submit-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 40rpx 20rpx;

		.protocol {
			color: #19be6b;
		}

		.btn {
			padding: 20rpx 0;
			color: #fff;
			font-size: 28rpx;
		}
	}

	.slot-content {
		margin: 28rpx 0;
		text-align: center;
	}

	.popup-wrapper {
		padding: 24rpx 24rpx 40rpx;
		text-align: center;

		.tip {
			padding: 50rpx 0;
		}
	}
</style>
